<template>
  <wd-popup
    :model-value="props.visable"
    :title="userDialog.title"
    position="center"
    @close="close">
    <view class="user-select-container">
      <!-- 搜索区域 -->
      <view v-show="showSearch" class="search-section">
        <wd-card class="search-card">
          <wd-search
            v-model="value"
            @search="search"
            @clear="clear"
            @cancel="cancel"
            :maxlength="10"
            placeholder="请输入用户姓名" />
        </wd-card>
      </view>

      <!-- 表格区域 -->
      <view class="table-section">
        <wd-card class="table-card">
          <lh-table
            :showChecker="true"
            :rows="state.rows"
            :columns="state.columns"
            :loading="loading"
            :showNothing="false"
            @check="check"
          ></lh-table>
        </wd-card>
      </view>

      <!-- 按钮区域 -->
      <view class="button-section">
        <wd-row :gutter="20">
          <view style="text-align: left;">
            <wd-button
              type="info"
              size="large"
              block
              @tap="close">
              取消
            </wd-button>
          </view>
          <view style="text-align: right;">
            <wd-button
              type="primary"
              size="large"
              block
              @tap="confirm">
              确认
            </wd-button>
          </view>
        </wd-row>
      </view>

      <wd-message-box />
    </view>
  </wd-popup>
</template>
<script setup lang="ts">
import  api from '@/api/system/user';
import type { UserQuery, UserVO } from '@/api/system/user/types';
import type { DeptTreeVO, DeptVO } from '@/api/system/dept/types';
import useDialog from '@/hooks/useDialog';
import { computed, getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs, watch, watchEffect } from 'vue';
import { useDict } from '@/api/system/dict';
import { listUser } from '@/api/system/user/index';
import { useMessage } from 'wot-design-uni';
import type { TaskOperationBo } from '@/pagesA/api/workflow/task/types';
import { taskOperation } from '@/pagesA/api/workflow/task';
import user from '@/api/system/user';


const message = useMessage()
const value = ref<string>('');
const loading = ref(true);
const userDialog = useDialog({
  title: '用户选择'
});

const showSearch = ref(true);
const total = ref(0);
const deptName = ref('');
const deptOptions = ref<DeptTreeVO[]>([]);
const selectUserList = ref<UserVO[]>([]);
const state = reactive({
  columns:[
    {name: 'nickName', title: '姓名', fixed: true}
  ],
  rows:[]
})
const finalSelectUserList = ref<UserVO[]>([]);
const userList = ref<UserVO[]>();
const queryParams = ref<UserQuery>({
  pageNum: 1,
  pageSize: 10,
  nickName: '',
});
const cancel = () => {
  emit('update:visable', false);
};
const search = async () => {
  loading.value = true;
  queryParams.value.nickName = value.value;
  queryParams.value.pageNum = 1;
  const res = await listUser(queryParams.value);
  userList.value = res.rows;
  total.value = res.total;
  state.rows = res.rows;
  loading.value = false;
};
const clear = () => { 
  loading.value = true;
  state.rows = [];
  loading.value = false;
};

const check = (selectedRows) => {
  finalSelectUserList.value = selectedRows;  // ✅ 直接赋值，不需要 .value
};
const close = () => {
  emit('update:visable', false);
};
const confirm = async() => {
  if (finalSelectUserList.value.length === 0) {
    message.alert('请选择用户')
    return;
  }
  emit('update:visable', false);
  emit('confirmCallBack', finalSelectUserList.value[finalSelectUserList.value.length - 1]);
};

const transconfirm = async() => {
  if (finalSelectUserList.value.length === 0) {
    message.alert('请选择用户')
    return;
  }
  emit('confirmCallBack', finalSelectUserList.value);
  emit('update:visable', false);
};

onMounted(() => { 
  state.rows = props.userList;
});
const props = defineProps({
  visable: Boolean,
  userList: Array
});

const emit = defineEmits(['update:visable','confirmCallBack']);
</script>

<style lang="scss" scoped>
.user-select-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20rpx;
  gap: 20rpx;
}

.search-section {
  flex-shrink: 0;
}

.search-card {
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.table-section {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.table-card {
  flex: 1;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;

  :deep(.wd-card__body) {
    padding: 0;
    height: 100%;
    overflow: auto;
  }
}

.button-section {
  flex-shrink: 0;
  padding-top: 20rpx;
  border-top: 1rpx solid #f0f0f0;
  background: #fafafa;
  margin: 0 -20rpx -20rpx -20rpx;
  padding: 30rpx 20rpx 20rpx 20rpx;
  border-radius: 0 0 12rpx 12rpx;
}

// 按钮样式优化
:deep(.wd-button) {
  border-radius: 8rpx;
  font-weight: 500;
  transition: all 0.3s ease;

  &.wd-button--primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
  }

  &.wd-button--success {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border: none;
  }

  &.wd-button--info {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    color: #666;
    border: none;
  }
}

// 搜索框样式优化
:deep(.wd-search) {
  .wd-search__input {
    border-radius: 25rpx;
    background: #f8f9fa;
    border: 1rpx solid #e9ecef;
  }
}

// 弹窗样式优化
:deep(.wd-popup) {
  border-radius: 16rpx;
  overflow: hidden;
}
</style>